<template>
    <div id="hotlist">
        <div class="newProductListWrapper">
            <section>
                <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :topDistance="20" :bottomDistance="20" :topPullText="topPullText" :topDropText="topDropText" :bottomPullText="bottomPullText" :auto-fill="false">
                    <div v-for="x in list" :key="x">
                        <div class="newProductList" :id="x.pro_id" :type="x.id_type">
                            <header>
                                <dl @click="goNewDetail($event)">
                                    <dd><img :src="x.pro_img" style="width:100%;height:3.52rem;"></dd>
                                    <dt style="text-align: left">
                                        <p style="width: 90%;margin: 0 auto;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{x.subtitle}}</p>
                                    </dt>
                                </dl>
                            </header>
                            <footer>
                                <div class="flo-l">
                                    <span class="priceColor flo-l"></span>
                                    <span class="priceColor" style="text-decoration: line-through;">￥{{x.pro_price}}</span>
                                    <!--<span class="flo-l" style="margin-left: .1rem">已砍{{x.pro_sells}}件</span>-->
                                </div>
                                <div class="flo-r" @click="goNewDetail($event)">
                                    <a href="javascript:;">砍到{{x.pro_low_price}}元</a>
                                </div>
                            </footer>
                        </div>
                    </div>
                </mt-loadmore>
                <span v-if="lookMore" style="font-size: .26rem;color: #969696;text-align: center;display: block;">下拉查看更多</span>
            </section>
        </div>
    </div>

</template>

<script>
import config from "../../config/config.js";
import share from "../..//share/share.js";
import MtaH5 from "mta-h5-analysis";
export default {
    data() {
        return {
            list: [],
            allLoaded: Boolean,
            topPullText: "",
            bottomPullText: "",
            topDropText: "下拉刷新",
            pageSize: 1,
            lookMore: false
        };
    },
    methods: {
        goNewDetail($event) {
            var proId = $event.currentTarget.parentNode.parentNode.getAttribute(
                    "id"
                ),
                type = $event.currentTarget.parentNode.parentNode.getAttribute(
                    "type"
                );
            this.$router.push("/newDetail/" + proId + "" + "/" + type);
        },
        getViewInfo(pageSize) {
            var value = JSON.stringify({
                    page: pageSize,
                    tag: 1,
                    token: localStorage.getItem("token")
                }),
                key = demo(value);
            axios
                .post(
                    "/Home/home/HomeBottomButton",
                    {
                        value: value,
                        key: key
                    },
                    config
                )
                .then(
                    function(response) {
                        if (response.data.code == 200) {
                            if (pageSize == 1) {
                                this.list = response.data.data.list;
                            } else {
                                this.list = this.list.concat(
                                    response.data.data.list
                                );
                            }
                            if (response.data.data.listNum == pageSize) {
                                this.$nextTick(function() {
                                    this.allLoaded = true;
                                    this.lookMore = false;
                                });
                            } else {
                                this.$nextTick(function() {
                                    this.allLoaded = false;
                                    this.lookMore = true;
                                });
                            }
                        }
                    }.bind(this)
                )
                .catch(function(error) {
                    console.log(error);
                });
        },
        // loadTop() {
        //     var self = this;
        //     self.pageSize=1;
        //     setTimeout(function () {
        //         self.getViewInfo(self.pageSize);
        //         self.$refs.loadmore.onTopLoaded();
        //     }, 500);
        // },
        loadBottom() {
            var self = this;
            self.lookMore = false;
            setTimeout(function() {
                self.pageSize++;
                self.getViewInfo(self.pageSize);
                self.$refs.loadmore.onBottomLoaded();
            }, 500);
        },
        scrollEvent(e) {
            sessionStorage.setItem("hotTop", e.target.scrollTop);
        }
    },
    activated() {
        var that = this;
        document
            .getElementById("home")
            .addEventListener("scroll", this.scrollEvent);
        if (sessionStorage.getItem("hotTop")) {
            document.getElementById("home").scrollTop = sessionStorage.getItem(
                "hotTop"
            );
        }
        this.getViewInfo(this.pageSize);
        share({});
        MtaH5.init({
            sid: "500594815",
            cid: "500595819",
            autoReport: 0,
            senseHash: 0,
            senseQuery: 0,
            performanceMonitor: 0,
            ignoreParams: []
        });
        MtaH5.pgv();
    },
    deactivated() {
        document
            .getElementById("home")
            .removeEventListener("scroll", this.scrollEvent);
    },
    beforeDestroy() {
        document
            .getElementById("home")
            .removeEventListener("scroll", this.scrollEvent);
    }
};
</script>

<style scoped>
</style>